<template>
  <div class="page-content">
    <top-header title="配送看板" :company="userInfo && userInfo.tenant_company || '木多鱼智造'" />

    <div class="main-content">
      <count-flop :data="countData" />

      <div class="bulletin-board flex flex-center">
        <bulletinBoard />
      </div>

      <div class="fit row">
        <div class="col-6 q-pa-md">
          <carouselBoard :title="tobeDeliveredTable.title" :data="tobeDeliveredTable.data" :columns="tobeDeliveredTable.columns" :row-count="tobeDeliveredTable.rows" />
        </div>
        <div class="col-6 q-pa-md">
          <carouselBoard :title="deliveredTable.title" :data="deliveredTable.data" :columns="deliveredTable.columns" :row-count="deliveredTable.rows" />
        </div>
      </div>
    </div>

    <bottom-border />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { useMeta } from 'quasar';
import { useStore } from 'stores/store';
import { mapState, mapActions } from 'pinia';
import EventBus from 'src/lib/event-bus'; // 用于组件间通信

import topHeader from './components/default/topHeader.vue';
import bottomBorder from './components/default/bottomBorder.vue';
import countFlop from './components/default/countFlop4.vue';
import bulletinBoard from './components/default/bulletinBoard.vue';
import carouselBoard from './components/default/carouselBoard.vue';

export default defineComponent({
  setup (props, context) {
    const $store = useStore();
    useMeta({
      // 设置文件标题
      title: `${$store.siteConfig.appName} - 木多鱼系列`,
      meta: {
        description: {
          name: 'description',
          content: $store.siteConfig.description || $store.siteConfig.subTitle
        }
      }
    });
  },
  inject: ['setTheme', 'getThemeName'],
  components: {
    topHeader,
    bottomBorder,
    countFlop,
    bulletinBoard,
    carouselBoard
  },
  data () {
    return {
      flop: {
        sellMaterial: 0,
        deliveryQry: 0,
        toBeDelivered: 0,
        delivered: 0
      },
      delivered: [],

      tobeDeliveredTable: {
        title: '待配送清单',
        data: [],
        columns: [
          { name: 'bill_no', label: '订单号', width: 170, align: 'center' },
          { name: 'type', label: '类型', width: 80, align: 'center' },
          { name: 'material_name_model', label: '货物', align: 'left' },
          { name: 'left_amount', label: '配送数量', width: 120, align: 'right', format: (val, row) => `${val} ${row.material_unit}` }
        ],
        rows: 10
      },
      deliveredTable: {
        title: '今日已配送清单',
        data: [],
        columns: [
          { name: 'bill_no', label: '订单号', width: 170, align: 'center' },
          { name: 'type', label: '类型', width: 80, align: 'center' },
          { name: 'material_name_model', label: '货物', width: 300, align: 'left' },
          { name: 'deliver_amount', label: '配送数量', width: 140, align: 'right', format: (val, row) => `${val} ${row.material_unit}` },
          { name: 'logistics', label: '物流', align: 'center' }
        ],
        rows: 10
      }
    }
  },
  created () {
    this.setTheme(this.theme);
    const self = this;
    EventBus.on('new_order', (val) => {
      self.freshData();
    });
  },
  mounted () {
    this.freshData();
  },
  methods: {
    freshData () {
      this.$axios.post('/c2/tenant/dashboard/deliveryData').then(({ data }) => {
        this.flop = data.flop;
        this.tobeDeliveredTable.data = data.toBeDelivered;
        this.deliveredTable.data = data.delivered;
      });
    }
  },
  computed: {
    ...mapState(useStore, ['siteInfo', 'userInfo']),
    countData () {
      return {
        sellMaterial: {
          title: '在售货物',
          unit: '款',
          number: this.flop.sellMaterial || 0,
          style: {
            color: '#4d99fc',
            'font-weight': 'bold',
            'font-size': '80px'
          },
          icon: 'sell'
        },
        deliveryQry: {
          title: '配送总量',
          unit: '笔',
          number: this.flop.deliveryQry || 0,
          style: {
            color: '#ff0000',
            'font-weight': 'bold',
            'font-size': '80px'
          },
          icon: 'local_shipping'
        },
        toBeDelivered: {
          title: '待配送',
          unit: '笔',
          number: this.flop.toBeDelivered || 0,
          style: {
            color: '#90f6ee',
            'font-weight': 'bold',
            'font-size': '80px'
          },
          icon: 'access_alarm'
        },
        delivered: {
          title: '今日已配送',
          unit: '笔',
          number: this.flop.delivered || 0,
          style: {
            color: '#f46827',
            'font-weight': 'bold',
            'font-size': '80px'
          },
          icon: 'transfer_within_a_station'
        }
      };
    }
  }

});
</script>
<style lang="scss">
.page-content {
  flex: 1;
  display: flex;
  flex-direction: column;

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
  }

  .bulletin-board {
    height: 100px;
    width: 100%;
  }

  .bottom-footer {
    text-align: center;
    padding: 5px;
  }
}

</style>
